/**
 * 实验步骤条
 */
import { FC, useEffect, useMemo } from "react";
import { observer, inject } from "mobx-react";
import { Link, useParams } from "react-router-dom";
import { Steps } from "antd";
import { ITStore } from "../../store";

interface TProp {
  store: ITStore;
}

interface ITStepProp extends TProp {
  currentStep: number;
}

const { Step } = Steps;

interface stepLangItem {
  title: string;
  pathName: string;
}

const stepLang: stepLangItem[] = [
  {
    title: "langstep1",
    pathName: "add",
  },
  {
    title: "langstep2",
    pathName: "shelf",
  },
  {
    title: "langstep3",
    pathName: "reagents",
  },
  {
    title: "langstep4",
    pathName: "reactor",
  },
  {
    title: "langstep5",
    pathName: "finished",
  },
];

const StepTop: FC<ITStepProp | any> = ({
  store,
  currentStep,
}: ITStepProp): JSX.Element => {
  const {
    languageStore: { lang },
    designerStore: { currentDesigner, getDesignerInfo },
  } = store;

  const params = useParams();

  const { step = 0, id = "" } = currentDesigner || {};

  useEffect(() => {
    if (!currentDesigner) {
      const { id } = params;
      if (id) {
        getDesignerInfo({ id });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentDesigner, params]);

  const items: any = useMemo(()=>{
    let templist: any = [];
    stepLang.forEach((item,index) => {
      const { title, pathName } = item;
      if(index <= step){
        templist.push({title: <Link to={`/designer/${pathName}/${id}`}>{lang[title]}</Link>})
      } else {
        templist.push({title:lang[title]})
      }
    })
    return templist
  },[step, lang])

  return (
    <Steps current={currentStep} items={items} />
  );
};

export default inject("store")(observer(StepTop));
